<template>
  <div class="contract-box">
    <div class="add-content-box edit-content" v-for="(item, key) in list" :key="`${key}_${item.uuid}`">
      <el-form-item :prop="keysName + '.' + key + '.typeId'" :rules="rules['dynamicSelect']">
        <el-select placeholder="请选择" clearable filterable v-model="item.typeId" @change="val => chooseModelHandler(val, item)">
          <el-option v-for="itm in otherList" :key="itm.id" :label="itm.name" :value="itm.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :prop="keysName + '.' + key + '.count'" :rules="rules['dynamicWrite']">
        <el-input-number placeholder="请填写数量" :controls="false" v-model="item.count"></el-input-number>
      </el-form-item>
      <el-icon name="el-icon-delete" class="delete-icon" @click="() => deleteItem(item)">
        <CircleCloseFilled />
      </el-icon>
    </div>
    <div class="add-content-box add-content">
      <span @click="addHandler">新增</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, computed, ref } from "vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { generateUUID } from "@/utils";
import { useDict } from "@/hooks/useDict";
const { getDictIdAsync } = useDict();
//变量
const emits = defineEmits(["update:list"]);

const props = defineProps({
  rules: {
    type: Object,
    default: () => {
      return {};
    }
  },
  keysName: {
    type: String,
    default: ""
  },
  list: {
    type: Array,
    default: () => []
  },
  typeId: {
    type: String,
    default: ""
  }
});

let otherList: any = ref([]);
const list: any = computed({
  get: () => props.list,
  set: val => {
    emits("update:list", val);
  }
});

// 方法
const deleteItem = (item: any) => {
  const index = list.value.findIndex((itm: any) => itm.uuid == item.uuid);
  list.value.splice(index, 1);
};
const addHandler = () => {
  list.value.push({
    uuid: generateUUID(),
    count: undefined,
    typeId: ""
  });
  emits("update:list");
};
const chooseModelHandler = (val: any, item: any) => {
  const obj = otherList.value.find((item: any) => item.id == val);
  item.remark = props.typeId;
  item.name = obj.name;
};
onMounted(async () => {
  otherList.value = await getDictIdAsync(props.typeId);
});
</script>
<style lang="scss" scoped>
.contract-box {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.add-img {
  display: flex;
  :deep(.d-upload) {
    flex: 0 0 40px;
    margin-left: 10px;
    .add-img-plus {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      font-size: 14px;
      color: #999999;
      cursor: pointer;
      background-color: #f5f7fa;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    li:has(.add-img-plus) {
      margin-bottom: 0 !important;
    }
    li {
      .d-upload-close {
        top: 0;
        right: -10px;
      }
    }
  }
}
.add-content-box {
  width: 100%;
  height: 62px;
}
.add-content {
  display: flex;
  align-items: flex-end;
  height: 100%;
  background-color: initial;
  span {
    width: 100%;
    height: 70px;
    font-size: 16px;
    font-weight: 400;
    line-height: 80px;
    color: #666666;
    text-align: center;
    cursor: pointer;
    background-color: #f5f7fa;
  }
}
.edit-content {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  height: auto;
  gap: 16px;
  .delete-icon {
    position: absolute;
    top: -10px;
    right: -1px;
    display: block;
    font-size: 14px;
    cursor: pointer;
  }
}
.rundle-dot {
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 50%;
}
.fixed {
  :deep(.el-select__wrapper) {
    font-size: 16px;
    cursor: auto;
    background: none;
    border: 0;
    box-shadow: none;
    .el-select__suffix {
      display: none;
    }
    .el-select__selected-item {
      color: #666666 !important;
    }
  }
}
</style>
